
<script setup>
import { ref } from 'vue';
    const flg=ref(true);
    const mark=ref(100)
</script>
<template>
  <p>条件渲染指令,就是决定某个元素是否隐藏,有两个指令分别是v-show和v-if,两者的区别在于,v-show结果为false,仅仅是将元素隐藏,而v-if则是从dom数中移除</p>
<div>
<div class="red" v-show="flg"></div>
<div class="green" v-if="!flg"></div>
</div>
<!-- v-if支持多分枝 -->
 <div>
  <div v-if="mark>=90">优秀</div>
  <div v-else-if="mark>=70">良好</div>
  <div v-else="mark<60">差</div>
 </div>
</template>


<style scoped>
.red,.green{
  height: 200px;
  width:200px;
}
.red{
  background: red;
}
.green{
  background: green;
}

</style>
